<template>
  <div class="worth-box">
    <div class="worth-title">
      <img
        src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png"
        alt=""
        class="img-title"
      />
      <div class="worth-text">严选好物 用心生活</div>
      <img
        src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView"
        alt=""
        class="img-bg"
      />
    </div>
    <div class="worth-page">
      <van-swipe
        class="my-swipe"
        indicator-color="#dd1a21"
        style="height: 270px"
      >
        <van-swipe-item>
          <div class="u-group">
            <a
              :href="item.columnUrl"
              class="u-item"
              v-for="item in knowList1"
              :key="item.id"
            >
              <div class="m-topContainer">
                <div class="u-remind-tag" v-if="item.vaildEndTime">NEW</div>
                <img :src="item.picUrl" class="u-topPic" />
              </div>
              <div class="m-detail">
                <div class="u-mainText">{{ item.mainTitle }}</div>
                <div class="u-descText">{{ item.viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="u-group">
            <a
              :href="item.columnUrl"
              class="u-item"
              v-for="item in knowList2"
              :key="item.id"
            >
              <div class="m-topContainer">
                <div class="u-remind-tag" v-if="item.vaildEndTime">NEW</div>
                <img :src="item.picUrl" class="u-topPic" />
              </div>
              <div class="m-detail">
                <div class="u-mainText">{{ item.mainTitle }}</div>
                <div class="u-descText">{{ item.viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="u-group">
            <a
              :href="item.columnUrl"
              class="u-item"
              v-for="item in knowList3"
              :key="item.id"
            >
              <div class="m-topContainer">
                <div class="u-remind-tag" v-if="item.vaildEndTime">NEW</div>
                <img :src="item.picUrl" class="u-topPic" />
              </div>
              <div class="m-detail">
                <div class="u-mainText">{{ item.mainTitle }}</div>
                <div class="u-descText">{{ item.viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="u-group">
            <a
              :href="item.columnUrl"
              class="u-item"
              v-for="item in knowList4"
              :key="item.id"
            >
              <div class="m-topContainer">
                <div class="u-remind-tag" v-if="item.vaildEndTime">NEW</div>
                <img :src="item.picUrl" class="u-topPic" />
              </div>
              <div class="m-detail">
                <div class="u-mainText">{{ item.mainTitle }}</div>
                <div class="u-descText">{{ item.viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="u-group">
            <a
              :href="item.columnUrl"
              class="u-item"
              v-for="item in knowList5"
              :key="item.id"
            >
              <div class="m-topContainer">
                <div class="u-remind-tag" v-if="item.vaildEndTime">NEW</div>
                <img :src="item.picUrl" class="u-topPic" />
              </div>
              <div class="m-detail">
                <div class="u-mainText">{{ item.mainTitle }}</div>
                <div class="u-descText">{{ item.viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="u-group">
            <a
              :href="item.columnUrl"
              class="u-item"
              v-for="item in knowList6"
              :key="item.id"
            >
              <div class="m-topContainer">
                <div class="u-remind-tag" v-if="item.vaildEndTime">NEW</div>
                <img :src="item.picUrl" class="u-topPic" />
              </div>
              <div class="m-detail">
                <div class="u-mainText">{{ item.mainTitle }}</div>
                <div class="u-descText">{{ item.viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
        <van-swipe-item>
          <div class="u-group">
            <a
              :href="item.columnUrl"
              class="u-item"
              v-for="item in knowList7"
              :key="item.id"
            >
              <div class="m-topContainer">
                <div class="u-remind-tag" v-if="item.vaildEndTime">NEW</div>
                <img :src="item.picUrl" class="u-topPic" />
              </div>
              <div class="m-detail">
                <div class="u-mainText">{{ item.mainTitle }}</div>
                <div class="u-descText">{{ item.viceTitle }}</div>
              </div>
            </a>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
export default {
    data() {
    return {
      knowList1: [],
      knowList2: [],
      knowList3: [],
      knowList4: [],
      knowList5: [],
      knowList6: [],
      knowList7: [],
      src: "https://m.you.163.com",
    };
  },
  created() {
    this.queryRecAutoData();
  },
  //  列表数据
  methods: {
    async queryRecAutoData() {
      let obtain = await this.$api.know();
      obtain = obtain.data.navList;
      let search = await this.$api.search();
      console.log(search);
      this.knowList1.push(obtain[0], obtain[7]);
      this.knowList2.push(obtain[1], obtain[8]);
      this.knowList3.push(obtain[2], obtain[9]);
      this.knowList4.push(obtain[3], obtain[10]);
      this.knowList5.push(obtain[4], obtain[11]);
      this.knowList6.push(obtain[5], obtain[12]);
      this.knowList7.push(obtain[6], obtain[13]);
    },
  },
};
</script>

<style lang="less" scoped>
.worth-box {
  position: relative;
  padding-top: 72.31875px;
  background: #eee;
  box-sizing: border-box;
  .worth-title {
    position: absolute;
    top: 0;
    .img-title {
      position: absolute;
      width: 86.45px;
      height: auto;
      top: 13.33px;
      left: 7.98px;
    }
    .worth-text {
      font-size: 21.28px;
      line-height: 29.26px;
      height: 29.26px;
      position: absolute;
      font-family: PingFangSC-Regular;
      left: 93.1px;
      top: 29.26px;
      color: #fff;
    }
    .img-bg {
      width: 498.75px;
      height: auto;
    }
  }
  .worth-page {
    width: 468.825px;
    background: #fff;
    border-radius: 10.64px;
    margin: 0 auto;
    .van-swipe{
      padding-top: 0;
    }

    .my-swipe {
      border-radius: 10.64px !important;
      .van-swipe__indicator {
        width: 19.551px !important;
        height: 19.95px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        opacity: 1;
      }
    
      .van-swipe-item {
        width: 118.0375px !important;
        img{
          position: static !important;
          transform: translateY(0) !important;
        }
      }
      .u-group {
        height: 312.55px;
      }
      .u-group,
      .u-oddGroup {
        padding: 23.94px 3.99px 3.99px;
        width: 119.7px;
        background: #fff;
        box-sizing: border-box;
        .u-item.u-bottom {
          margin-top:13.965px;
        }
        .u-item {
          display: inline-block;
          position: relative;
          width:111.72px;
          height: 133.665px;
          word-wrap: break-word;
          word-break: normal;
          .m-topContainer {
            position: relative;
            width:79.8px;
            height:79.8px;
            margin: 0 auto;
            .u-remind-tag {
              position: absolute;
              background: #e23c42;
              top: 1.49375px;
              right: -2.49375px;
              width: 38.40375px;
              height: 11.97px;
              border-radius: 5.985px;
              font-size:8.9775px;
              color: #fff;
              line-height: 11.97px;
              text-align: center;
            }
            .u-topPic {
              width: 79.8px;
              height: 79.8px;
            }
          }
          .m-detail {
            width: 84px;
            margin-top: 3px;
            .u-mainText {
              font-family: PingFang-SC-Bold;
              font-weight: 700;
              font-size: 17.29px;
              width: 111.72px;
              height: 26.6px;
              white-space: nowrap;
              overflow: hidden;
              color: #333;
              text-align: center;
              line-height: 26.6px;
            }
            .u-descText {
              width: 111.72px;
              margin-top: 1.33px;
              font-family: PingFangSC-Regular;
              font-size: 15.96px;
              color: #999;
              text-align: center;
              height: 19.95px;
              line-height: 19.95px;
              white-space: nowrap;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>